// import { makeAutoObservable, autorun, observable, computed, action } from 'mobx'

// class Timer {
//   // @observable
//   secondsPassed = 0

//   // @computed 
//   // get abc() {
//   //   return this.secondsPassed + 1
//   // }

//   data = {}

//   constructor() {
//     makeAutoObservable(this)
//   }

//   // @action.bound
//   increment() {
//     this.secondsPassed += 1
//   }

//   reset() {
//     this.secondsPassed = 0
//   }
// }

// const timer = new Timer()

// // autorun(() => {
// //   console.log(timer.secondsPassed)
// // })

// // setTimeout(() => {
// //   console.log(100)
// //   timer.secondsPassed = 200
// // }, 2000)

// export default timer



import { makeObservable, observable, computed, autorun, when, reaction } from "mobx"

class OrderLine {
    price = 0
    amount = 1

    constructor(price) {
        makeObservable(this, {
            price: observable,
            amount: observable,
            total: computed
        })
        this.price = price
    }

    get total() {
        console.log("Computing...")
        return this.price * this.amount
    }
}

const order = new OrderLine(1)

// const stop = autorun(() => {
//     console.log("Total: " + order.total)
// })
// Computing...
// Total: 0

// when(() => {
//   return order.total > 100
// }, () => {
//   console.log('买够了')
//   console.log(order.total)
// })

// console.log(order.total)
// (No recomputing!)
// 0

reaction(() => {
  return order.total
}, (t) => {
  console.log('reaction2')
  console.log(t)
})

order.amount = 200
// Computing...
// (No autorun)

order.price = 2
// Computing...
// Total: 10



// stop()

// order.price = 3
// Neither the computation nor autorun will be recomputed.